<template>
  <l-panel style="padding: 0px">
    <template #toolLeft>
      <l-query2
        :items="queryItems"
        :formData="queryData"
        :loading="tableLoading"
        @search="handleSearch"
      >
        <template #f_Theme>
          <el-input v-model="queryData.f_Theme" :placeholder="$t('please enter')" />
        </template>
        <template #f_DateQRange>
          <l-date
            format="yyyy-MM-dd"
            dateType="daterange"
            v-model="queryData.f_DateQRange"
            :placeholder="$t('please select')"
          />
        </template>
        <template #f_Name>
          <l-select :options="f_NameOptions" v-model="queryData.f_Name" />
        </template>
      </l-query2>
    </template>
    <l-table
      ref="mainTable"
      :loading="tableLoading"
      :columns="columns"
      :dataSource="tableData"
      :isPage="true"
      :pageTotal="tableTotal"
      :tablePage.sync="tableCurrentPage"
      @loadPageData="turnTablePage"
    >
    </l-table>
  </l-panel>
</template>

<script>
const api = window.$api.erpcase.ticketlog;
export default {
  props: {
    purchaseId: String,
  },
  data() {
    return {
      // query参数
      queryData: {
        f_Theme: "",
        f_DateQRange: "",
        f_Name: "",
      },
      queryItems: [
        { label: "主题", prop: "f_Theme" },
        { label: "日期", prop: "f_DateQRange" },
        { label: "开票方", prop: "f_Name" },
      ],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "到票编号",
          prop: "f_Number",
          minWidth: 120,
          align: "left",
          dataType: "encode",
          isNotAutoWrap: true,
        },
        {
          label: "到票主题",
          prop: "f_Theme",
          minWidth: 150,
          align: "left",
          dataType: "input",
          isNotAutoWrap: true,
        },
        {
          label: "到票日期",
          prop: "f_Date",
          minWidth: 90,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd",
          isNotAutoWrap: true,
        },
        {
          label: "开票方",
          prop: "f_Name",
          minWidth: 140,
          align: "left",
          dataType: "dataSource",
          dataCode: "ERP_Suppliers",
          valueKey: "f_id",
          labelKey: "f_name",
          isNotAutoWrap: true,
        },
        {
          label: "发票号码",
          prop: "f_TicketNum",
          minWidth: 150,
          align: "left",
          dataType: "input",
          isNotAutoWrap: true,
        },
        {
          label: "发票金额",
          prop: "f_TicketAmount",
          minWidth: 80,
          align: "left",
          dataType: "input",
        },
      ],
    };
  },
  computed: {
    f_NameOptions() {
      this.lr_loadDataSourceData("ERP_Suppliers");
      return this.lr_DataSourceOptions(
        this.lr_dataSourceData["ERP_Suppliers"],
        "f_id",
        "f_name"
      );
    },
  },
  watch: {
    purchaseId: {
      handler() {
        this.init();
      },
      immediate: true,
    },
  },
  methods: {
    init() {
      this.loadTableData();
    },
    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_CreateDate DESC";
      queryData.f_PurchaseId = this.purchaseId;

      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },
  },
};
</script>
